<script lang="ts">
	let wendaTag;
	let total = 10;
	let moduleList = ['最新', '高中', '初中', '小学', '综合'];
	let wendaModule = '最新';
	let wendaList = [
		{
			id: 1,
			title: '问题一',
			popular: true,
			viewCount: 12,
			publishTime: '2021-04-28 19:36',
			answer: 'segl'
		},
		{
			id: 2,
			title: '问题二',
			popular: true,
			viewCount: 12,
			publishTime: '2021-04-28 19:36',
			answer: 'segl'
		},
		{
			id: 3,
			title: '问题三',
			popular: true,
			viewCount: 12,
			publishTime: '2021-04-28 19:36',
			answer: 'segl'
		},
		{
			id: 4,
			title: '问题四',
			popular: true,
			viewCount: 12,
			publishTime: '2021-04-28 19:36',
			answer: 'segl'
		}
	];
	let relateList = [];
</script>

<svelte:head>
	<title>Welcome sveltekit</title>
</svelte:head>
<main id="wendaList">
	<div class="layout">
		<div class="left-part">
			<div class="section wenda">
				{#if wendaTag}
					<h3 class="section-title">
						{wendaTag}
						<span class="about-amount">共有{wendaTag}相关问答{total}条</span>
					</h3>
				{:else}
					<h3 class="section-title">资讯</h3>
				{/if}
				<div class="content">
					{#if !wendaTag}
						<div class="tag-wrapper">
							{#each moduleList as moduleItem}
								{#if wendaModule == moduleItem}
									<div class="tag active">{moduleItem}</div>
								{:else}
									<div class="tag">{moduleItem}</div>
								{/if}
							{/each}
						</div>
					{/if}
					<div class="question-wrapper">
						{#each wendaList as wendaItem}
							<a class="question-item" href="/wenda/{wendaItem.id}.html" target="_blank">
								<div class="title-line">
									<i class="question-icon" />
									<span class="question-title hot">{wendaItem.title}</span>
									{#if wendaItem.popular}
										<i class="hot-icon" />
									{/if}
									<span class="view-count">阅读量：{wendaItem.viewCount}人</span>
								</div>
								<p class="distribute-time">发布时间：{wendaItem.publishTime}</p>
								<div class="answer">
									<i class="answer-icon" />
									<p class="answer-content">{@html wendaItem.answer}</p>
								</div>
							</a>
						{/each}
					</div>
					<div class="pagination" />
				</div>
			</div>
		</div>

		<div class="right-part">
			<div class="section relative-question">
				<h3 class="section-title">相关问题</h3>
				<ul class="content">
					{#each relateList as wendaItem}
						<li class="question">
							<a
								class="ask"
								href="/wenda/{wendaItem.id}.html"
								target="_blank"
								title={wendaItem.title}>{wendaItem.title}</a
							>
							<p class="info">
								<span class="tag">{wendaItem.module}</span>
								<span class="time">{wendaItem.publishTime}</span>
							</p>
						</li>
					{/each}
				</ul>
			</div>
		</div>
	</div>
</main>

<style lang="less">
	#wendaList {
		.layout {
			margin: 0 auto;
			margin-bottom: 60px;
			width: 1100px;
		}
		.left-part {
			float: left;
			width: 711px;
		}

		.right-part {
			float: right;
			width: 363px;
		}

		.section {
			border-radius: 3px;
			background-color: #fff;
			box-shadow: 0px 0px 14px 1px rgba(200, 200, 200, 0.21);

			.section-title {
				position: relative;
				margin-left: 14px;
				height: 23px;
				line-height: 23px;
				font-size: 24px;
				color: #262626;

				&::before {
					content: '';
					position: absolute;
					top: 0;
					left: -14px;
					width: 4px;
					height: 23px;
					display: block;
					background: #e90c2f;
				}
			}
		}

		.wenda {
			padding: 38px 30px;
			min-height: 888px;
			box-sizing: border-box;

			.section-title {
				position: relative;
				.about-amount {
					position: absolute;
					right: 0;
					bottom: 0;
					font-size: 14px;
					color: #999;
				}
			}

			.tag-wrapper {
				margin-top: 27px;
				margin-left: 14px;
				font-size: 0;

				.tag {
					margin-right: 12px;
					width: 65px;
					height: 30px;
					display: inline-block;
					border-radius: 5px;
					background-color: #b6b6b6;
					line-height: 30px;
					text-align: center;
					font-size: 18px;
					color: #fff;
					cursor: pointer;

					&.active {
						background-color: #e90c2f;
					}
				}
			}

			.question-wrapper {
				.question-item {
					position: relative;
					padding: 24px 14px 20px;
					border-bottom: 1px solid rgba(227, 227, 227, 0.9);
					display: block;
					text-decoration: none;
					cursor: pointer;

					&:last-child {
						border-bottom: none;
					}

					.title-line {
						position: relative;
						line-height: 27px;
						font-size: 0;

						.question-icon {
							position: absolute;
							top: 4px;
							left: 0;
							width: 18px;
							height: 18px;
							display: block;
							background: url('')
								no-repeat center;
							background-size: cover;
						}

						.question-title {
							margin-left: 26px;
							max-width: 448px;
							display: inline-block;
							vertical-align: middle;
							font-size: 18px;
							color: #262626;
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;
						}

						.hot-icon {
							display: inline-block;
							margin-left: 5px;
							vertical-align: middle;
							width: 24px;
							height: 26px;
							background: url('https://web-data.zmlearn.com/image/5nnHg4Q4eR9W8EASFpnwVW/hot.png')
								no-repeat center;
							background-size: cover;
						}

						.view-count {
							position: absolute;
							top: 0;
							right: 0;
							font-size: 14px;
							color: #999;
						}
					}

					.distribute-time {
						margin-top: 10px;
						margin-left: 26px;
						font-size: 14px;
						color: #999;
					}

					.answer {
						position: relative;
						margin-top: 15px;
						font-size: 0;

						.answer-icon {
							position: absolute;
							top: 4px;
							left: 0;
							width: 18px;
							height: 18px;
							display: block;
							background: url('')
								no-repeat center;
							background-size: cover;
						}

						.answer-content {
							margin-left: 26px;
							max-height: 48px;
							font-size: 16px;
							color: #999;
							overflow: hidden;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							-moz-box-orient: vertical;
							box-orient: vertical;
							text-overflow: ellipsis;
							overflow: hidden;
						}
					}
				}
			}

			.pagination {
				margin-top: 20px;
				text-align: center;
				user-select: none;

				.operation {
					margin-right: 10px;
					padding: 0 5px;
					height: 22px;
					display: inline-block;
					vertical-align: middle;
					border: 1px solid #b6b6b6;
					font-size: 14px;
					color: #999;
					line-height: 22px;
					cursor: pointer;

					&.current {
						border: 1px solid #e90c2f;
						background-color: #e90c2f;
						color: #fff;
					}
				}
			}
		}
		.relative-question {
			padding: 38px 35px;
			box-sizing: border-box;

			.content {
				padding-left: 14px;
				list-style-type: disc;

				.question {
					padding: 18px 0;
					border-bottom: 1px solid #e3e3e3;

					&:last-child {
						padding-bottom: 0;
						border-bottom: none;
					}

					.ask {
						display: block;
						text-decoration: none;
						font-size: 18px;
						color: #262626;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
					}

					.info {
						position: relative;
						margin-top: 10px;
					}

					.tag {
						padding: 0 5px;
						height: 22px;
						border-radius: 3px;
						background-color: #ff8e33;
						display: inline-block;
						font-size: 16px;
						color: #fff;
					}

					.time {
						position: absolute;
						right: 0;
						bottom: 0;
						font-size: 14px;
						color: #999;
					}
				}
			}
		}
	}
</style>
